<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<script src="js/js.js"></script>
<script>
    window.onload=function()
    {   var M=3;
        var nav=document.getElementById("play");
        var urlimg="images/ba.jpg";
        var bg=[];
        //初始化游戏界面
        var _J=installshuffleJ(M);
        nav.style.width=M*105+"px";
        for(var i= 0,j=1;j<=M;j++)
        {
            for(var k=1;k<=M;k++)
            {
                bg[i]=-(k-1)*100+"px "+-(j-1)*100+"px";
                i++;
            }
        }
        for(var i=0;i<_J.length;i++)
        {
            var li=document.createElement("li");
            nav.appendChild(li);
            li.style.backgroundImage="url("+urlimg+")";
            li.style.backgroundPosition=bg[_J[i]];
            li.style.backgroundSize=M*100;
            li.className="li"+i;
            li.id="li"+_J[i];
        }
        document.getElementById("li0").style.backgroundImage="none";
        //初始化游戏界面结束
        //点击移动
        var lis=document.getElementsByTagName("li");
        localStorage.clear();
        for(var j= 1,i=0;i<lis.length;i++)
        {
            a=function(i){
                lis[i].onclick=function(){
                if(canmove(lis[i],M))
                  {
                    var zero=document.getElementById("li0");
                    var x=lis[i].getAttribute("id");
                    var bg=lis[i].style.backgroundPosition;
                    zero.style.backgroundImage="url("+urlimg+")";
                    zero.style.backgroundPosition=bg;
                    zero.id=x;
                    lis[i].style.backgroundImage="none";
                    lis[i].setAttribute("id","li0");
                      blockli.xulie=_J;
                      blockli.storgestep(lis[i],x,zero.getAttribute("class"));
                      blockli.moveaccount=j++;
                      localStorage.setItem("step"+blockli.moveaccount,JSON.stringify(blockli));
                  }
                  if(gameok())
                  {
                      alert("恭喜，拼图成功！");
                  }
                }
            }
            a(i);
        }
    }

</script>

<body>
<div class="main">
<ul class="play" id="play">

</ul>
</div>
</body>
</html>